$themecolor:#00afb1;

$color:#fff;

$header_left :0.3rem;

$bgColor:#f3f1f2;

$content_bgColor:#fff;

$public_pd:0.1rem;

$grey_p:#8a8989;

$danger_color:red;

$warning_color:#fea82e;

$black_color:#4f4f50;

$blue_color:#528af1;

$green_color:#007a00;

$black_p:#403e3e;



$font-weight-small:300;

$navH:40px;

$table_bolder_color:#cbcbcb;

$drowdown_btn:#eeeeee;

$drowdown_btn_p:#8a8989;

$drowdown_border_color:#e5e5e5;

$modal_index:999;

$small_p:0.12rem;

$middle_p:0.16rem;

$color_state_start: #7c7b8b;
$color_state_ready: #f0c900;
$color_state_holding: #5a56ce;
$color_state_going: #ff5350;
$color_state_complete: #3ebd41;
$color_state_recovery: #ffa2c3;
$color_state_observed: #b41bab;
$color_state_back: #fff;
$color_state_out: #00997b;
$color_state_cancel: #000;

//$box_height: 430px;
$box_height:350px;
$box_height2: 430px;


@mixin text_center{
    text-align: center
}

@mixin box_shadow {
    box-shadow: 1px 1px 1px 1px #e0dedf;
}

@mixin  bolder {
    border:1px solid $table_bolder_color;
}

@mixin modal_bg {
   // background: rgba(255,255,255,0.4);
   background:rgba(160, 157, 157, 0.87);
}
//公共样式全局定义

body{
    color:$grey_p;
}
p{
    color:$grey_p;
}
.them_p{
    color:$themecolor !important;
}
.danger_p{
    color: $danger_color !important;
}
.bolder_bottom{
    border-bottom: 1px solid $table_bolder_color;
}
.black_p{
    color:$black_p !important;
    
}
.show{
    display: block !important;
}
.left{
    float: left;
}
.right{
    float:right;
}
.text_right{
    text-align: right;
}
.container,.content{
    padding: 0.1rem;
    overflow: hidden;
}
.row{
    width: 100%;
    display: block;
    overflow: hidden;
    .content{
        float: left;
        padding: 0.1rem;
        .white_bg{
            background: $content_bgColor;
        }
    }
}
.bg_theme{
    color:$color;
    background: $themecolor;
}
.btn{
    font-size: 0.14rem;
    padding: 5px 35px;
    font-weight: bolder;
    cursor: pointer;
    white-space: nowrap;
}
.btn_defalut{
    background:$themecolor;
    color: $color;
}

.btn_white{
    background:$color;
    color: $themecolor;
    border-color: $themecolor;
    &.active{
        background:$themecolor;
        color: $color;
    }
}

.btn_warning{
    background:$warning_color;
    color: $themecolor;
    border-color: $themecolor;
    
}
.btn_danger{
    background:$danger_color;
    color: $color;
    border-color: $danger_color;
    
}
.btn_black{
    background:$black_color;
    color: $color;
    border-color: $black_color;
    
}
.btn_grey{
    background:$drowdown_border_color;
    color: #666666;
    border-color: $drowdown_border_color;
    &:hover,&.active{
        background:$themecolor;
        color: $color;
    }  
}
.btn_radius{
    border-radius: 10px;
}
.btn_radius_small{
    border-radius: 5px;
}
.btn_small{
    font-size:0.12rem;
    padding: 5px 8px;
}
.bolder_content{
    @include bolder;
}

//下拉按钮样式
.dropdown{
    .dropdown_content{
        position: absolute;
        display: none;
        .btn_white{
            color:$drowdown_btn_p;
            display: block;
            width: 100%;
            border:1px solid $drowdown_border_color;
            &:hover{
                background: $drowdown_btn;
            }
        }
    }
    &:hover,&.show{
        .dropdown_content{
            
            display: block;
        }
    }
}

.table{
   
    width: 100%;

    th{
        background: #f8f8f8;
        white-space: nowrap;
        font-size: 0.13rem;
    }
    td{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    tr,td,th{
        padding: 8px 5px;
        text-align: center;
    }
   
}
.table_small{
    tr,td,th{
        padding:5px;
        text-align: center;
    }
}
.table_layout{
    table-layout: auto;
}
.table-border{
    
    th,tr,td{
        border-top:1px solid $table_bolder_color;
        border-left:1px solid $table_bolder_color;
    }
    th:last-child,tr:last-child,td:last-child{
        border-right:1px solid $table_bolder_color;
    }

    tr:last-child{
        td{
            border-bottom:1px solid $table_bolder_color;
        }
    }
}
.bolder_box{
    height: 20px;
    width: 100%;
   
    border: 1px solid #999;
}
.ul_list{
    display: table;
    li{
        display: table-cell;
        vertical-align: middle;
    }
    .list_lable{
        color:$grey_p;
        font-size:$small_p;
        font-weight: bolder;
    }
    .list_detail{

    }
}
.middle_p{
    font-size:$middle_p;
}
.danger{
    background: $danger_color;
}
.warning{
    background: $warning_color;
}
.wait{
    background: $green_color;
}
.modal_container{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 300px;
    left: 0;
    width: 40%;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
}
.green_modal{
    .modal_container{
        color:$color;
        background: #00585a;
    }
}
.serach_input{
    border: 1px solid $themecolor;
    border-radius: 5px;
    padding: 8px 20px;
    input{
        
        font-size: 0.2rem;
        font-weight: bolder;
        width: 80px;
        text-align: center;
        
    }
}

// .semiarc{
//     width: 80px;
//     height: 80px;
//     border:20px solid $themecolor;
//     border-left:20px solid transparent;
//     border-bottom:20px solid transparent;
//     border-radius: 50%;
//     transform: rotate(-45deg);
// }
.circle_process{

    position: relative;

    width: 80px;

    height : 80px;

}

.circle_process .wrapper{

    width: 40px;

    height: 80px;

    position: absolute;

    top:0;

    overflow: hidden;

}

.circle_process .right{

    right:0;

}

.circle_process .left{

    left:0;

}

.circle_process .circle{

    width: 80px;

    height: 80px;

    border:8px solid transparent;

    border-radius: 50%;

    position: absolute;

    top:0;

    transform : rotate(-135deg);

}

.circle_process .rightcircle{

    border-top:8px solid $themecolor;

    border-right:8px solid $themecolor;

    right:0;

  
    transform:rotate(0deg);
}

.circle_process .leftcircle{

    border-bottom:8px solid $themecolor;

    border-left:8px solid $themecolor;

    left:0;

   // -webkit-animation: circle_left 5s linear infinite;

   transform:rotate(90deg);
}

@-webkit-keyframes circle_right{

    0%{

        -webkit-transform: rotate(-135deg);

    }

    50%,100%{

        -webkit-transform: rotate(45deg);

    }

}

@-webkit-keyframes circle_left{

    0%,50%{

        -webkit-transform: rotate(-135deg);

    }

    100%{

        -webkit-transform: rotate(45deg);

    }

}

.table_display{
    display: table;
}
.table_display_cell{
    display: table-cell;
    vertical-align: middle;
}